<template>
   <div id="app">
   		<router-view class="view"></router-view>
		<router-view class="view" name="subject"></router-view>
    	<router-view class="view" name="search"></router-view>
   </div>
</template>

<script>
   export default {
       data () {
       return {

       }
       name: 'app'
   }
 }
</script>

<style lang="scss">
 	html {
		//  照顾IE6 文中的元素相对于这个根元素进行设置 用rem定义尺寸的另一个好处是更能适应缩放／浏览器设置字体尺寸等情况 
		// 10px
 		font-size: 62.5%;
 	}
 	#app {
 		max-width: 41.2em;
 		margin: 0 auto;
 	}
	.has-header {
		margin-top: 4.8rem;
	}
	 h2{
		 font-size: 1.68rem;
		 font-weight: normal;
		 color:#111;
	 }
	 ul, li, a, h2{
		 margin: 0;
		 padding: 0;
	 }
	 li{
		 list-style: none;
	 }
	 a{
		 text-decoration: none;
	 }
	 .header-bar {
		 position: fixed;
		 left: 0;
		 right: 0;
		 top: 0;
		 z-index: 998;
		 display: flex;
		 align-items: center;
		 height: 4.8rem;
		 padding: 0 1.8rem;
		 background: #fff;
		 border-bottom: 0.1rem solid #F3F3F3;
	 }
 	
</style>
